import React, { Component } from 'react'
import { PickerView} from 'antd-mobile';
import data from './city.json'
import { connect } from 'react-redux';
 

const province = data


 class City extends Component {
  state = {
    value:['014','014-1','014-1-7'],
    shengId:'',
    shiId:'',
  };
  onChange = (value) => {
    this.setState({
      value,
    });
    for(let i = 0;i<this.state.value.length;i++){
      for(let n = 0;n <province.length;n++){
        if(this.state.value[i] === province[n].value){
          this.setState({shengId:this.state.value[i]})
          this.props.changeSheng(province[n].label)
        }
        if(province[n].children && province[n].value === this.state.shengId){
          let children =province[n].children
          for(let s = 0; s<children.length;s++){
            if(this.state.value[i] ===children[s].value){
              this.setState({shiId:this.state.value[i]})
              this.props.changeShi(children[s].label)
            }
            if(children[s].value === this.state.shiId){
              let sunzi = children[s].children
              for (let q = 0 ; q<sunzi.length;q++){
                if(this.state.value[i] === sunzi[q].value){
                this.props.changeQu(sunzi[q].label)
                }
              }
            }
            if(children[s].value === this.state.shiId && children[s].children.length === 0){
              this.props.changeQu('')
            }
          }
        }
      }
    }
  }
  render() {
    return (
      <div className='myCity'>
        <div className='myinCity'><span>{this.props.sheng} {this.props.shi} {this.props.qu}</span></div>
        <PickerView
          data={province}
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    )
  }

  componentDidMount(){
  }
}

const mapStateToProps=(state) =>{
  return{
    sheng:state.getIn(['my','sheng']),
    shi:state.getIn(['my','shi']),
    qu:state.getIn(['my','qu'])

  }
}

const mapActionToProps=(dispatch)=>{
  return{
    changeSheng(value){
      dispatch({
        type:'changeSheng',
        value
      })
    },
    changeShi(value){
      dispatch({
        type:'changeShi',
        value
      })
    },
    changeQu(value){
      dispatch({
        type:'changeQu',
        value
      })
    }
  }
}

export default connect(mapStateToProps,mapActionToProps)(City)
